import {designPage, reactive, useRefs} from "plain-design-composition";
import './DemoScroll.scss';
import Scroll from "../../../../packages/components/Scroll";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, ButtonGroup} from "../../../../packages";
import {classnames} from 'plain-utils/dom/classnames';

export default designPage(() => {

  const state = reactive({
    list: (() => {
      let ret = [];
      let i = 0;
      while (i < 40) {
        ret.push(i++);
      }
      return ret;
    })(),
    checkboxValue: [] as string[],
  });

  const { refs, onRef } = useRefs({
    scroll1: Scroll,
    scroll2: Scroll,
    autoScroll1: Scroll,
    autoScroll2: Scroll,
  });

  function getClass(item: any) {
    console.log('item', item);
    return {};
  }

  return () => (
    <div className={'demo-scroll'}>
      <DemoRow title={'基本用法(检查滚动的时候会不会导致插槽的内容重新执行)'}>
        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
          <Scroll>
            <div>
              {state.list.map((item, index) => (
                <div className={classnames('demo-scroll-label', getClass(item),)} key={index}>
                  {item}
                </div>
              ))}
            </div>
          </Scroll>
        </div>
        <ButtonGroup>
          <Button label={'添加'} onClick={() => state.list.push(state.list.length + 1)}/>
          <Button label={'删除'} onClick={() => state.list.shift()}/>
        </ButtonGroup>
      </DemoRow>
      <DemoRow title={'基本用法'}>
        <div className="demo-scroll-wrapper">
          <Scroll>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      {/*<DemoRow title={'基本用法(多选列表)'}>
        <div className="demo-scroll-wrapper" style={{ display: 'inline-block', verticalAlign: 'top' }}>
          <Scroll>
            <CheckboxGroup v-model={state.checkboxValue}>
              {state.list.map(item => (
                <div className={'demo-scroll-label'} key={item}>
                  <Checkbox val={item}/>、
                  {item}
                </div>
              ))}
            </CheckboxGroup>
          </Scroll>
        </div>
        <ButtonGroup vertical>
          <Button label={'添加'} icon={'el-icon-circle-plus-outline'} onClick={() => state.list.push(state.list.length + 1)}/>
          <Button label={'删除'} icon={'el-icon-remove-outline'} onClick={() => state.list.shift()}/>
        </ButtonGroup>
        {JSON.stringify(state.checkboxValue)}
      </DemoRow>*/}
      <DemoRow title={'可以横向滚动'}>
        <div className={'demo-scroll-wrapper'}>
          <Scroll scrollX scrollAfterDragEnd>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'只能横向滚动'}>
        <div className={'demo-scroll-wrapper'}>
          <Scroll scrollX scrollY={false}>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'适配内容高度'}>
        <div className={'demo-scroll-wrapper'} style={{ height: 'auto' }}>
          <Scroll scrollX fitContentHeight>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'适配内容宽度'}>
        <div className={'demo-scroll-wrapper'} style={{ width: 'auto' }}>
          <Scroll fitContentWidth>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'适配host高度'}>
        <div className={'demo-scroll-wrapper'}>
          <Scroll fitContentWidth scrollX>
            <div style={{ height: '100%', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'适配host宽度'}>
        <div className={'demo-scroll-wrapper'}>
          <Scroll fitHostWidth>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>

      <DemoRow title={'滚动：纵向'}>
        <div className="demo-scroll-wrapper">
          <Scroll ref={onRef.scroll1} onScroll={() => console.log('vertical scroll')}>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
              <div>
                <p><Button size={'small'} label={'scroll'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, 1000)}/></p>
                <p><Button size={'small'} label={'scroll(no emit)'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, { time: 1000, noEmitScroll: true })}/></p>
                <p><Button size={'small'} label={'scrollEnd'} onClick={() => refs.scroll1!.methods.scrollEnd()}/></p>
              </div>
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'滚动：横向'}>
        <div className="demo-scroll-wrapper">
          <Scroll ref={onRef.scroll2} scrollX onScroll={() => console.log('horizontal scroll')}>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
              <div>
                <p><Button size={'small'} label={'scroll'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, 1000)}/></p>
                <p><Button size={'small'} label={'scroll(no emit)'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, { time: 1000, noEmitScroll: true })}/></p>
                <p><Button size={'small'} label={'scrollEnd'} onClick={() => refs.scroll2!.methods.scrollEnd()}/></p>
              </div>
            </div>
          </Scroll>
        </div>
      </DemoRow>
      <DemoRow title={'自动滚动：纵向'}>
        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
          <Scroll ref={onRef.autoScroll1}>
            <div>
              {state.list.map((item, index) => (
                <div className="demo-scroll-label" key={index}>
                  {item}
                </div>
              ))}
            </div>
          </Scroll>
        </div>
        <div style={{ display: 'inline-block' }}>
          <ButtonGroup>
            <Button label={'向下滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollBottom()}/>
            <Button label={'向上滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollTop()}/>
            <Button label={'停止滚动'} onClick={() => refs.autoScroll1!.methods.stopAutoScroll()}/>
          </ButtonGroup>
        </div>
      </DemoRow>
      <DemoRow title={'自动滚动：横向'}>
        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
          <Scroll ref={onRef.autoScroll2} scrollX>
            <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => (
                <div className="demo-scroll-label" key={index} style={{ width: '30px', display: 'inline-block', marginRight: '10px' }}>
                  {item}
                </div>
              ))}
            </div>
          </Scroll>
        </div>
        <div style={{ display: 'inline-block' }}>
          <ButtonGroup>
            <Button label={'向右滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollRight()}/>
            <Button label={'向左滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollLeft()}/>
            <Button label={'停止滚动'} onClick={() => refs.autoScroll2!.methods.stopAutoScroll()}/>
          </ButtonGroup>
        </div>
      </DemoRow>
      <DemoRow title={'拖拽结束之后滚动'}>
        <div className={'demo-scroll-wrapper'}>
          <Scroll scrollX scrollAfterDragEnd>
            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
              this is content
            </div>
          </Scroll>
        </div>
      </DemoRow>
    </div>
  );
});
